<template>
	<view class="content">
		<view class="userMsg">
			<view class="img">
				<img src="../../static/img/heart.png" alt="" v-if="avatar==''">
				<img :src="avatar" alt="" v-if="avatar!=''">
			</view>
			<view class="text" @click="login" v-if="username==''">
				未登录，请先登录！
			</view>
			<view class="text" v-if="!username==''">
				{{username}}
			</view>
		</view>
		<view class="tab">
			<button class="mini-btn" type="default" size="mini">我喜欢</button>
			<button class="mini-btn" type="default" size="mini">喜欢我</button>
			<button class="mini-btn" type="default" size="mini">互相喜欢</button>
		</view>
		<view class="msgList">
			<view class="list" v-for="(item,index) in list">
				<view class="approve" :key="item.id">
					<img :src="item.img1" alt="" class="img1">
					<span>{{item.name}}</span>
					
					<img :src="item.img2" alt="" class="img2" @click="goTo(item)">
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	let {
		wxLogin,
	} = require('../../network/login')
	import WXBizDataCrypt from '../../network/WXBizDataCrypt.js'
	export default {

		data() {
			return {
				isShow: true,
				avatar: '',
				username: '',
				msg: {},
				token: '',
				list: [{
						id: 1,
						img1: '../../static/img/adm.png',
						img2: '../../static/img/jiantou.png',
						name: '我的认证'
					},
					{
						id: 2,
						img1: '../../static/img/mssage.png',
						img2: '../../static/img/jiantou.png',
						name: '基本信息'
					},
					{
						id: 3,
						img1: '../../static/img/photo.png',
						img2: '../../static/img/jiantou.png',
						name: '我的相册'
					}
				]
			}
		},
		methods: {
			// 基本信息页面跳转
			goTo(item) {
				if (item.name == '基本信息') {
					console.log(item.name);
					// uni.navigateTo({
					// 	url: "/subpackkage/my/massage"
					// })
				}
			},
			// 微信登录
			login() {

				// 授权登录弹框
				uni.getUserProfile({
					desc: "授权登录",
					// 得到用户头像及昵称
					success: (res) => {
						let {
							nickName,
							avatarUrl
						} = res.userInfo
						this.avatar = avatarUrl
						this.username = nickName
						uni.setStorageSync("_user", res.userInfo)
						console.log("res"+res);
						//获取code
						// uni.login({
						// 	success: (res) => {
						// 		//code换openid
						// 		uni.request({
						// 			url: "https://api.weixin.qq.com/sns/jscode2session",
						// 			data: {
						// 				appid: "wx077b0dcd59dde6cd",  //小程序appid
						// 				secret: "3b23d9f6eabfb01e16be7a9a2c5de37e",  // 小程序appSecret
						// 				grand_type: 'authorization_code',
						// 				js_code: res.code  // 登录时获取的 code
						// 			},
						// 			success: (res) => {
						// 				console.log(res.data.openid, nickName, '111')
						// 				this.sendMsg(res.data.openid, nickName)
						// 			}
						// 		})
						// 	}
						// })
					}
				})
			},
			async sendMsg(wx_id, nickName) {
				let data = {
					wxId: wx_id,
					nickname: nickName,
				}
				console.log(data);
				let resss = await wxLogin(data)
				console.log(resss);
				if (resss.code == 200) {
					uni.setStorageSync("_token", resss.data.token)
					this.isShow = false
				}
			},
		},
		onShow() {
			this.token = uni.getStorageSync('_token')
			let user = uni.getStorageSync("_user")
			if (user) {
				this.avatar = user.avatarUrl
				this.username = user.nickName
			}
		},
		onLoad() {
			
		}

	}
</script>

<style lang="scss" scoped>
	* {
		margin: 0;
		padding: 0;
	}

	.content {
		background-color: #e6e6e6;

		.userMsg {
			padding-top: 80rpx;
			height: 180rpx;
			display: flex;
			align-items: center;
			background-image: linear-gradient(rgba(255, 85, 127, 1.0), rgba(255, 0, 0, 0));

			.img {
				img {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
					margin-left: 40rpx;
				}
			}

			.text {
				font-size: 14px;
				margin-left: 60rpx;
			}
		}

		.tab {
			display: grid;
			grid-template-columns: 33.3% 33.3% 33.3%;

			.mini-btn {
				width: 100%;
			}
		}

		.msgList {
			background-color: #fff;
			margin-top: 20rpx;

			.list {
				padding: 20rpx 40rpx;
				border-bottom: 2rpx solid #ccc;

				.approve {
					display: flex;
					align-items: center;

					.img1 {
						width: 40rpx;
						height: 40rpx;
					}

					span {
						margin-left: 20rpx;
						font-size: 14px;
					}

					.img2 {
						width: 20rpx;
						height: 20rpx;
						margin-left: 68%;
					}
				}
			}
		}

	}
</style>
